<template>
  <!--关于勤博-->
  <div class="content padding250">
    <headers></headers>
    <!--<carousel></carousel>-->
    <p class="banner padding88"><img :src="sliderImg" alt="" height="200px" width="100%"></p>
    <div class="divider ">
      <div class="auto">
        <router-link to="/">首页</router-link><span>></span><router-link to="/help">帮助中心</router-link><span>></span><span>{{help.htmlTitle}}</span>
      </div>
    </div>
    <div class="auto">
      <!--<p class="title" @click.stop="goHelp">帮助中心</p>-->
      <div class="container clearfix font14" >
        <p class="news_title">{{help.htmlTitle}}</p>
        <p class="date">时间：{{help.createTime}}</p>
        <div  v-html=help.htmlContent></div>
      </div>
    </div>
    <Spin fix v-show="isSpinShow" >
      <div class="loader">
        <Icon type="ios-loading" size=26 class="demo-spin-icon-load"></Icon>
        <div class="font14">加载中...</div>
      </div>
    </Spin>
    <footers></footers>
  </div>
</template>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less" rel="stylesheet/less">
  /* 旋转效果 */
  .demo-spin-icon-load{
    animation: ani-demo-spin 1s linear infinite;
  }
  @keyframes ani-demo-spin {
    from { transform: rotate(0deg);}
    50% { transform: rotate(180deg);}
    to { transform: rotate(360deg);}
  }
  /* 假如内容过长，一屏放不下，滚动条下拉覆盖不全 */
  .ivu-spin-fix {
    position: fixed;
  }

  .news_title {
    font-size: 22px;
    color: #333;
    font-weight: 700;
  }

  .banner{
    height: 260px;
  }
  .divider{
    height: 53px;
    background-color: #fff;
    font-size: 14px;
    color: #957960;
    line-height: 53px;
    text-align: left;
    margin-bottom: 30px;
    box-shadow: 5px 1px 10px #ccc;
    a{
      color: #957960;
      &:hover{
        color: #9C7649;
        font-weight: 700;
      }
    }
    span{
      margin: 0 10px;
    }
  }


  .content{
    //background-color: #f5f5f5;
    text-align: left;
    .title{
      font-size: 20px;
      color: #000;
      margin: 20px 0 25px 0;
      padding: 15px 20px ;
      background-color: #fff;
      cursor: pointer;
    }
    .container{
      background-color: #fff;
      padding: 0px 41px;
      line-height: 30px;
      .date{
        color: #999;
        /*margin-bottom: 15px;*/
        margin: 15px 0;
      }
      /*li{
        line-height: 33px;
        font-size: 16px;
        color: #000;
        margin-bottom: 30px;
      }
      p{
        img{
          margin: 0 15px 10px 0;
        }
        img:last-child{
          margin-right: 0;
        }
      }*/
    }
  }
</style>
<script type="text/ecmascript-6">
  import headers from '../template/header'
  import footers from '../template/footer'
  import carousel from '../template/carousel'
  import {issuePageDetail,sliderPC} from "../../http";
  import {timeFilter} from "../../myFilters"
  export default {
    name: 'about',
    props: {},
    data() {
      return {
        html: '',     //页面信息
        isSpinShow:false,
        helpId:this.$route.query.helpId,
        help:'',
        sliderImg:'',
      };
    },
    methods: {
      //跳转帮助列表页面
      goHelp(){
        this.$router.push({
          name:'help'
        })
      },
      getHelpdetail(){
        if(this.isSpinShow === false) {
          this.isSpinShow = true;
          //获取封面图
          sliderPC({sliderType:'8'}).then(res =>{
            this.sliderImg = res.data.slider.sliderImg;
          }).catch()
          issuePageDetail({issueId: this.helpId}).then(res => {
            if (res.code === 200) {
              this.isSpinShow = false;
              this.help = res.data.issue;
            } else {
              this.isSpinShow = false;
              this.$Notice.warning({
                title: "个人中心提醒",
                desc: res.info,
                duration: 3,
              });
            }
          }).catch()
        }
      }
    },
    created() {
      this.getHelpdetail()
    },
    components: {
      headers,
      footers,
      carousel
    }
  }
</script>
